import React from "react";
import { Row, Col, } from 'antd'
import formItem from './formitem'
import { HolderOutlined } from '@ant-design/icons'
import './index.less'
const FormCenter = (props) => {
    const { list = [], selectIndex, onChange } = props
    return <Row gutter={[24, 24]}>
        {
            list.map((item, o) => {
                const { type } = item
                const Components = formItem[type]
                return <Col key={o} id={o} span={24}>
                    <div id={o} onClick={() => {
                        onChange({
                            changeType: 'select',
                            index: o
                        })
                    }} style={{ position: 'relative', boxShadow: '4px 4px 2px #e9e9e9' }} className={o == selectIndex ? 'formCenter_items_check' : ''}>
                        {(selectIndex == o && o !== 0) ? <div draggable={true} style={{ cursor: 'pointer', fontSize: 16, top: 24, left: '50%', marginLeft: '-20px', cursor: 'pointer', position: 'absolute', width: 40, height: 40, zIndex: 1 }}><HolderOutlined /></div> : ''}
                        <Components index={o} data={item}{...props}></Components>
                    </div>
                </Col>
            })
        }
    </Row>
}
export default FormCenter